<template>
  <div class="chatPage">
    <!-- 聊天界面头部 -->
    <page-header @toLastPage="toLastPage">
      <template v-slot:title v-if=friendInf>
       {{friendInf.F_beizhu?friendInf.F_beizhu:friendInf.F_FriendNickname}}
      </template>
      <template v-slot:right>
        <div @click="toDetail">
          ...
        </div>
      </template>
    </page-header>
    <!-- 聊天界面 -->
    <div class="content" ref="content" :style="'transform:translateY('+contentY+');'">
     <div>
        <div v-for="(item,index) in messageList" :key="index">
          <chat-item :chatItem=item :chatIndex=index :pretime="index>0?messageList[index-1].M_Time:0" :listY=listY @remake='remake' @showPacket='showPacket'></chat-item>
     </div>
     </div>
    </div>
    <!-- 弹出框蒙版 -->
    <div class="mask" v-if="boardStatus" @click="closeBoard"></div>
    <!-- 聊天界面底部 -->
    <div class="footer" :class="boardStatus?'openBoard':''">
      <div class="bottom-box flex" >
      <div class="f-left" @click="changeChatEvent">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yuyin"></use>
        </svg>
      </div>
      <div class="f-center f-1">
        <input type="text" v-show="!changeChatState" v-model="chatContent"/>
        <button v-show="changeChatState">按住 说话</button>
      </div>
      <div class="f-right flex" :style="'width:'+rightWidth+';'">
           <svg class="icon" aria-hidden="true" @click="showBoard('face')">
          <use xlink:href="#icon-biaoqing1"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-if="!sendStatus" @click="showBoard('operation')">
          <use xlink:href="#icon--tainjia"></use>
        </svg>
        <button v-if="sendStatus" @click="sendMsg('text')">发送</button>
      </div>
    </div>
     <!-- 底部弹出框 -->
    <div class="board" v-if="boardStatus">
      <van-swipe class="my-swipe" :stop-propagation="false"  :loop="false" indicator-color='#696969' ref='boardSwipe'>
        <!-- 操作菜单 -->
        <van-swipe-item class="flex"  v-for="i in swipeList" :key="i">
          <div class="item-wrapper" v-for="(item,index) in boardList" :key="index">
            <div :class="boardState==='operation'?'icon-wrapper-operation':'icon-wrapper-face' " v-if="index>=(i-1)*8&&index<=i*8-1">
          <!-- 相册 -->
          <van-uploader v-if="index===0&&boardState==='operation'" :after-read="afterRead" multiple>
            <svg class="icon" aria-hidden="true"   @click="operateEvent(item.event)">
           <use :xlink:href="item.icon"></use>
        </svg>
          </van-uploader>
               <svg class="icon" aria-hidden="true"   @click="operateEvent(item.event)" v-else-if="boardState==='operation'&&index>0">
           <use :xlink:href="item.icon"></use>
        </svg>
        <van-image
        width="2.5rem"
        height="2.5rem"
        fit="cover"
        :src="item.imgUrl"
        v-else
        @click="sendMsg('face',index)"
        />
        <div class="text">{{item.text}}</div>
          </div>
          </div>
        </van-swipe-item>
</van-swipe>
    </div>
</div> 
<!-- 红包 -->
  <div class="packet-mengban" @click="closeMengban" v-show="showPacketStatus">
    <div class="packet-wrapper flex" @click.stop>
      <div class="top">
        <div class="avatar flex f-center">
           <van-image
        width=".8rem"
        height=".8rem"
        radius=".1rem"
        fit="cover"
        :src="packetInf.avatar"
      />
          <div class="name">{{packetInf.name}}</div>
        </div>
        <div class="message">
          {{packetInf.M_PostMessages && packetInf.M_PostMessages.message}}
        </div>
         <div class="bottom" :class="openPacketStatus?'bottom-rotate':''" @click="openPacket">開</div>
      </div>
      <div class="open"></div>
    </div>
    <van-icon name="close" class="close" @click="closeMengban"/>
  </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import chatItem from "./chatItem";
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
import { image, user,messages,friends } from '../../../api/collections/index';
import upload from '../../../api/libs/upload';
export default {
  data() {
    return {
      // 改变聊天状态：语音/文字
      changeChatState: false,
      // 滚动的Y轴长度
      listY:0,
      // 聊天内容
      chatContent:'',
      // 发送按钮显示隐藏
      sendStatus:false,
      // 底部输入框右边宽度
      rightWidth:'2rem',
      // 底部弹出框状态
      boardStatus:false,
      // 是否首次打开底部弹出框
      isFirstBoardOpen:true,
      contentY:0,
      // 红包数据
      packetInf:{},
      // 表情包列表
      faceList:[
        {
        id:'01',
        imgUrl:'https://www.bing.com/th/id/OGC.56340be7eb9b6726ff8fa019aeab88fe?pid=1.7&rurl=https%3a%2f%2fwww.gexing.me%2fuploads%2fallimg%2f170207%2f6-1F20G43502143.gif&ehk=PSm%2fD4yLNN%2fW9azSYny90wz8nYltc7eRLUCqvgu0Qek%3d',
        text:'神经病哦'
      },
      {
        id:'02',
        imgUrl:'https://www.bing.com/th/id/OGC.64e14326d3d57e6f8ac07bff83d189ae?pid=1.7&rurl=http%3a%2f%2fpic.7230.com%2fUploads%2fGather%2f2016-08-29%2f57c409ee2864a.jpg&ehk=CPb%2bKXjPLJ6BJ7AG5OZww309VFWHnAV35NQyc1iUNvk%3d',
        text:'又干啥'
      },
       {
        id:'03',
        imgUrl:'https://www.bing.com/th/id/OGC.c6b476e3b6b4f7f52480e61ee8f7d0f8?pid=1.7&rurl=http%3a%2f%2fpic.7230.com%2fUploads%2fGather%2f2016-08-22%2f57ba60af440bb.gif&ehk=X%2bfiXOKeTDVARnFFHiFEl1HrFSeHppZKESRb9XEdJ2w%3d',
        text:'你最棒'
      },
       {
        id:'04',
        imgUrl:'https://www.bing.com/th/id/OGC.cf9691795f7e84a773f3ff4030908131?pid=1.7&rurl=http%3a%2f%2fpic.7230.com%2fUploads%2fGather%2f2016-08-22%2f57ba60b3bdb49.gif&ehk=WsD1VDNjePcGCx836wQTG4vyVy0nSVkyKIsB%2bQb0tPs%3d',
        text:'好害羞'
      },
      {
        id:'06',
        imgUrl:'https://www.bing.com/th/id/OGC.31cb91933bafad310623bbc73df70348?pid=1.7&rurl=https%3a%2f%2fwww.keaidian.com%2fuploads%2fallimg%2f190830%2f30110920_11.gif&ehk=8b%2bXLoR4miRWvK%2bHCfxUMval0oQOQBKHxtYiKIDH4jA%3d',
        text:'快乐'
      },
      {
        id:'07',
        imgUrl:'https://www.bing.com/th/id/OGC.5140d5a7ba4c21212843fb032bf2defa?pid=1.7&rurl=http%3a%2f%2fmat1.gtimg.com%2ffashion%2fimages%2findex%2f2016%2f06%2f15%2f152.gif&ehk=CyjN7uYVIxiHZ9m3tBoXErHtATbWcgzuaqxNAZpQsm4%3d',
        text:'算了算了'
      },
      {
        id:'08',
        imgUrl:'https://www.bing.com/th/id/OGC.4b041652188590feec00f188e6dd31c3?pid=1.7&rurl=http%3a%2f%2fpic.7230.com%2fUploads%2fGather%2f2016-08-22%2f57ba60b95342a.gif&ehk=%2f42aZzYXirjKSYgPBkhsSSiN9J54Jdaz9Pz4drRce64%3d',
        text:'难过'
      },
      {
        id:'09',
        imgUrl:'https://www.bing.com/th/id/OGC.dd10f0041b828df08f795ca751422850?pid=1.7&rurl=https%3a%2f%2fwww.gexing.me%2fuploads%2fallimg%2f170207%2f6-1F20G43533594.gif&ehk=BOUsnCMNnvyimXkpedGZs6%2b0Kq7SXqElDS7DiPJBZ8Y%3d',
        text:'睡觉了'
      },
      {
        id:'10',
        imgUrl:'https://www.bing.com/th/id/OGC.27c4d30aa1fc9593ce0e15ee4c19dbc9?pid=1.7&rurl=http%3a%2f%2fs9.rr.itc.cn%2fr%2fwapChange%2f20167_11_14%2fa8k0ey23814780694310.jpg&ehk=xQx6pJ3WPBtUGSixH15d%2fG3r4tITZchH%2b9amC%2fq96UY%3d',
        text:'任性'
      }
      ],
      // 弹出面板内容
      boardList:[],
      // 弹出面板选项：表情包/操作菜单
      boardState:'',
      // 操作菜单内容
      operationList:[
        {
          icon:'#icon-photo',
          text:'相册',
          event:'photo'
        },
         {
          icon:'#icon-xiangji',
          text:'拍摄',
          event:''
        },
        {
          icon:'#icon-yuyintonghua',
          text:'视频通话',
          event:''
        },
        {
          icon:'#icon-weizhi',
          text:'位置',
          event:''
        },
        {
          icon:'#icon--hongbao',
          text:'红包',
          event:'packet'
        },
         {
          icon:'#icon-c',
          text:'转账',
          event:''
        },
        {
          icon:'#icon-yuyinshuru',
          text:'语音输入',
          event:''
        },
         {
          icon:'#icon-wodeshoucang',
          text:'我的收藏',
          event:''
        },
         {
          icon:'#icon-mingpian',
          text:'名片',
          event:''
        }
      ],
      userId:sessionStorage.getItem('user'),
      friendId:this.$route.params.id,
      showPacketStatus:false,
      openPacketStatus:false
    };
  },
     meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
         const getUser = user.findOne({_id:this.userId})
        if(getUser){
             const avatar = image.findOne({_id:getUser.avatarId})
              avatar&&(getUser.avatar = avatar.base64)
        } 
        return getUser                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    },
    friendInf(){
       const inf = friends.findOne({F_UserID:this.userId,F_FriendID:this.friendId})
       const userInf = user.findOne({_id:this.friendId})
        if(inf&&userInf){
          const img = image.findOne({_id:inf.F_FriendAvatarId})
          inf.F_FriendNickname = userInf.nickname
          if(img){
            inf.F_FriendAvatar = img.base64
          }
        }
        return inf
    },
    messageList(){
     const list = messages.find({$or:[{M_ToUserID:this.userId,M_FromUserID:this.friendId,M_IsGroup:false},{M_ToUserID:this.friendId,M_FromUserID:this.userId,M_IsGroup:false}]}).fetch()
     if(list&&list.length!==0){
       list.forEach(e => {
         if(e.M_MessagesType == 'sendPacket'){
            let obj = e.M_PostMessages
            if(obj.acceptId == this.userId){
            const user1 = user.findOne({_id:obj.fromId})
            const user2 = friends.findOne({F_UserID:this.userId,F_FriendID:this.friendId})
            if(user1 && user2){
               e.M_PostMessages = '你领取了'+(user2.F_beizhu?user2.F_beizhu:user1.nickname)+'的'
            }
            }else{
               const user1 = user.findOne({_id:obj.acceptId})
            const user2 = friends.findOne({F_UserID:this.userId,F_FriendID:this.friendId})
            if(user1 && user2){
               e.M_PostMessages = (user2.F_beizhu?user2.F_beizhu:user1.nickname)+'领取了你的'
            }
            }
         }
          else{
          if(e.M_FromUserID == this.userId){
          if(this.friendInf){
            e.avatar = this.userInf.avatar
          }
        }
        else{
          if(this.friendInf){
            e.avatar = this.friendInf.F_FriendAvatar
          }
        }
          }
       })
       list.sort((e1,e2)=>{return e1.M_Time-e2.M_Time})
       return list
     }
    }
    },
  computed:{
    swipeList(){
      return Math.ceil(this.boardList.length/8)
    }
  },
  components: {
    chatItem,
    pageHeader
  },
  mounted() {
    this.setScollView();
  },
  watch:{
    chatContent(){
      if(this.chatContent.trim().length>0){
        this.rightWidth='3rem'
        this.sendStatus=true
      }
      else{
        this.sendStatus=false
         this.rightWidth='2rem'
      }
    },
    boardStatus(){
      if(!this.boardStatus){
        this.boardState=''
        this.isFirstBoardOpen=true
      }
    },
    messageList(){
      this.$nextTick(()=>{
          this.scroll.refresh();
       // 自动滚到到底部
        this.scroll.scrollTo(0,this.scroll.maxScrollY)
        })
    }
  },
  // 销毁完成时
  destroyed(){
    Meteor.call('message.isReaded',{
      toID:this.userId,
      fromID:this.friendId
    }),
    Meteor.call('indexMsg.updateCount',{
      userId:this.userId,
      otherId:this.friendId
    })
  },
  methods: {
    // 关闭弹出框
    closeBoard(){
      this.showBoard(this.boardState)
    },
    // 返回首页
    toLastPage() {
      this.$router.push("/home");
    },
    // 更改聊天方式:语音/文字
    changeChatEvent() {
      this.changeChatState = !this.changeChatState
    },
    // 打开弹出框
    showBoard(e){
       this.$nextTick(()=>{
          if(this.$refs.boardSwipe){
            this.$refs.boardSwipe.swipeTo(0,{immediate:false})
          }
        })
      if(this.boardState===e&&!this.isFirstBoardOpen||this.isFirstBoardOpen){
        this.boardStatus=!this.boardStatus
        this.isFirstBoardOpen=false
      }
      switch(e){
        case 'face':
          this.boardList=this.faceList;
          this.boardState='face'
          break;
        case 'operation':
          this.boardList=this.operationList;
          this.boardState = 'operation';
          break;
        default:break;
      }
      if(this.boardStatus===true){
       if(this.messageList){
          if(this.messageList.length>6){
          this.contentY='-9rem'
        }else{
        this.contentY=0
        }
       }
      }
      else{
        this.contentY=0
      }
    },
    // 设置聊天滚动
    setScollView() {
      this.$nextTick(() => {
        //$refs绑定元素
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.content, {
            //开启点击事件 默认为false
            click: true,
            probeType:3
          });
        } else if (!this.$refs.content) {
          return;
        } else {
          this.scroll.refresh();
        }
          this.scroll.on('scrollEnd', (pos) => {
         this.listY=pos.y
          })
          // 自动滚到到底部
        this.scroll.scrollTo(0,this.scroll.maxScrollY)
      });
    },
    // 发送消息
    sendMsg(e,index){
      const mine = friends.findOne({F_UserID:this.userId,F_FriendID:this.friendId})
      const yours = friends.findOne({F_UserID:this.friendId,F_FriendID:this.userId})
      if(!yours){
        this.$toast.fail('发送失败，对方已将您删除好友')
      }
      else if(mine.F_isBlock){
        this.$toast.fail('对方已被您拉黑，请取消后再操作')
      }
      else if(yours.F_isBlock){
        this.$toast.fail('发送失败，对方已将您拉入黑名单')
      }
      else{
          var obj = {
          M_PostMessages:'',
          M_Status:false,
          M_Time:new Date().getTime(),
          M_MessagesType:'text',
          M_FromUserID:this.userId,
          M_ToUserID:this.friendId,
          M_IsGroup:false
      }
      switch(e){
        case 'text':obj.M_PostMessages=this.chatContent;
        this.sendText(obj);
        this.chatContent = '';
        break;
        case 'face':obj.M_PostMessages=this.faceList[index].imgUrl;
        obj.M_MessagesType='face';
        this.sendText(obj);
        break;
        case 'image':obj.M_PostMessages = index;
        obj.M_MessagesType = 'image';
        this.sendText(obj);
        break;
        case 'sendPacket':obj.M_PostMessages = index;
        obj.M_MessagesType = 'sendPacket';
        this.sendText(obj);
        break;
        default:break;
      }
      }
    },
    // 发送文本
    sendText(e){
      let data = ''
      Meteor.call('message.create',e,(err,res)=>{
        if(err){
          this.$toast(err.error)
        }else{
            data = res
        }
      })
      setTimeout(()=>{
         this.createIndexMsg(this.userId,this.friendId,data)
        this.createIndexMsg(this.friendId,this.userId,data)
      },500)
    },
    // 建立首页消息表
    createIndexMsg(id1,id2,data){
        var msg = {
        I_UserId:id1,
        I_OtherId:id2,
        I_Type:'person',
        I_LastMsgId:data,
        I_isTop:false
      }
      let num = 0
      if(this.messageList){
        this.messageList.forEach((e) => {
        if(e.M_FromUserID == id2 && e.M_ToUserID == id1 && e.M_Status == false && e.M_MessagesType !== 'sendPacket'){
          num = num+1
        }
      })
      }
      msg.I_noReadCount = num
      Meteor.call('indexMsg.create',msg) 
    },
    remake(e){
     this.chatContent=this.list[e].data
    },
    operateEvent(e){
      switch(e){
        case 'photo':break;
        case 'packet':this.$router.push('/setPacket/'+this.friendId);break;
        default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      if(file instanceof Array){
            this.upLoadLength = file.length
            file.forEach((e,i) => {
                upload.uploadImg(e,this.afterUpload)
            })
        }
        else{
            upload.uploadImg(file,this.afterUpload)
        } 
    },
       //上传图片成功后
    afterUpload(res){
         if(res){
             Meteor.call('image.find',res,(err,e) =>{
               if(err){
                   this.$toast(err.error)
               }
               else{
                   this.sendMsg('image',e.base64)
               }
           })
         }
    },
    // 跳转到聊天详情页
    toDetail(){
      this.$router.push('/userBase/'+this.friendId)
    },
    // 显示红包界面
    showPacket(e){
    if(e.M_PostMessages.isOpen||e.M_FromUserID==this.userId){
      this.toGetPacket(e._id)
    }
    else{
      this.showPacketStatus = true
      this.packetInf = e
      const userInf = user.findOne({_id:this.userId})
      if(userInf){
        this.packetInf.name = userInf.nickname
      }

    }
  },
  toGetPacket(e){
    this.$router.push('/getPacket/'+e)
  },
  closeMengban(){
    this.showPacketStatus = false
  },
  openPacket(){
    this.openPacketStatus = true
     const userInf = user.findOne({_id:this.userId})
     if(userInf){
       Meteor.call('user.updatePay',{
         id:this.userId,
         pay:Number(this.userInf.pay)+Number(this.packetInf.M_PostMessages.money)
       })
     }
    setTimeout(()=>{
      this.packetInf.M_PostMessages.isOpen = !this.packetInf.M_PostMessages.isOpen
      Meteor.call('message.changeStatus',{
        id:this.packetInf._id,
        msg:this.packetInf.M_PostMessages
      })
      this.showPacketStatus =false
    this.openPacketStatus = false
    let msgContent = {acceptId:this.userId,fromId:this.friendId}
    this.sendMsg('sendPacket',msgContent)
      this.toGetPacket(this.packetInf._id)
    },1900)
  }
  }
};
</script>
<style scoped>
.header {
  position: fixed;
  background-color: #ededed;
  left: 0;
  right: 0;
  top: 0;
  padding: 0 0.3rem;
  height: 1.5rem;
  z-index: 999;
}
.h-left {
  font-size: 0.6rem;
  line-height: 1.5rem;
}
.h-center {
  font-size: 0.6rem;
  margin-left: 0.3rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.h-right {
  position: relative;
  bottom: 0.2rem;
  width: 1rem;
  text-align: right;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  bottom: 2rem;
  /* background-color: #ff0000; */
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
}
.bottom-box{
   background-color: #f7f7f7;
  box-sizing: border-box;
  height: 2rem;
   padding: 0.3rem;
   border-top: 1px solid #f7f7f7;
   border-bottom: 1px solid rgba(0,0,0,.1);
}
.openBoard{
  animation: rise .4s linear;
}
.f-left {
  width: 1rem;
  text-align: center;
  margin-top: 0.2rem;
}
.f-right {
  text-align: center;
}
.f-right button{
  background-color: #05C15F;
  font-size: .6rem;
  border-radius: .2rem;
  color: #fff;
}
.f-right .icon{
font-size: 1.4rem;
}
.f-right .icon:first-child {
  margin-right: 0.4rem;
}
.f-center {
  padding: 0 0.3rem;
}
input {
  background-color: #fff;
  border: none;
  width: 100%;
  padding: .1rem .2rem;
  caret-color: #00ff00;
  font-size: 0.6rem;
  height: 1.2rem;
  line-height: 1.2rem;
}
button {
  width: 100%;
  border: none;
  background-color: #fff;
  text-align: center;
  font-size: 0.6rem;
  height: 1.2rem;
  line-height: 1.2rem;
}
.board{
  height: 9rem;
  background-color: #F7F7F7;
}
  .my-swipe .van-swipe-item {
    color: #1E1E1E;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  .van-swipe-item{
    flex-wrap: wrap;
  }
  .item-wrapper{
    width: 25%;
    height: 50%;
  }
  .icon-wrapper-operation{
    box-sizing: border-box;
    padding: .6rem .5rem;
  }
  .icon-wrapper-face{
    padding: .3rem;
  }
  .icon-wrapper-operation .icon{
    text-align: center;
    background-color: #fff;
    padding: .5rem;
    border-radius: .5rem;
  }
  .text{
    font-size: .5rem;
    color: #808080;
  }
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 11rem;
    z-index: 999;
  }
  .packet-mengban{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.9);
    z-index: 9999;
    text-align: center;
  }
  .packet-wrapper{
   margin: 4rem auto 0; 
    border-radius: .3rem;
    width: 70vw;
    height: 60vh;
    overflow: hidden;
    background-color: #fff;
    flex-direction: column;
    animation: popup .4s linear;
  }
  .top{
    width: 100%;
    height: 70%;
    background-color: #F5604F;
    position: relative;
  }
  .top::after{
    content: '';
    height: 2rem;
    width: 100%;
    position: absolute;
    bottom: -2rem;
    left: 0;
    background-color: #F5604F;
    border-radius:0 0  100% 100%;
    box-shadow: 0 .05rem .05rem -.05rem #777;

  }
  .bottom{
    position: absolute;
    bottom: -3.2rem;
    left: 35%;
    background-color: #F0C999;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    z-index: 1;
    font-size: 1.2rem;
    text-align: center;
    line-height: 3rem;
  }
  .bottom-rotate{
    animation: rotate 2s linear;
  }
  .open{
    width: 100%;
    background-color: #F15441;
    flex:1;
  }
  .close{
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #D0AB71;
  }
  @keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}
  .top .avatar{
    font-size: .5rem;
    color: #FDD8AB;
    margin-top: 3rem;
  }
  .top .avatar .name{
    margin-left: .5rem;
  }
  .top .message{
    font-size: .8rem;
    color: #FDD8AB;
    margin-top: .5rem;
  }
  @keyframes popup {
    0%{
         width: 70vw;
        height: 60vh;
    }
    35%{
        width: 68vw;
        height: 58vh;
    }
    65%{
        width: 72vw;
        height: 62vh;
    }
    100%{
        width: 70vw;
        height: 60vh;
    }
}
@keyframes rise {
  0%{
    transform: translateY(9rem);
  }
  100%{
    transform: translateY(0);
  }
}

</style>